<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素周期表</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="element-top"">
        <div class="column">
            <div class="base-element column-element base-color">H</div>
            <div class="base-element column-element color-1">Li</div>
            <div class="base-element column-element color-1">Na</div>
            <div class="base-element column-element color-1">Ka</div>
            <div class="base-element column-element color-1">Rb</div>
            <div class="base-element column-element color-1">Cs</div>
            <div class="base-element column-element color-1">Fr</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-2">Be</div>
            <div class="base-element column-element color-2">Mg</div>
            <div class="base-element column-element color-2">Ca</div>
            <div class="base-element column-element color-2">Sr</div>
            <div class="base-element column-element color-2">Ba</div>
            <div class="base-element column-element color-2">Ra</div>        </div>
        <div class="column">
            <div class="base-element column-element color-3">Sc</div>
            <div class="base-element column-element color-3">Y</div>
            <div class="base-element column-element color-3">La</div>
            <div class="base-element column-element color-3">Ac</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Ti</div>
            <div class="base-element column-element color-3">Zr</div>
            <div class="base-element column-element color-3">Hf</div>
            <div class="base-element column-element color-3">Rf</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">V</div>
            <div class="base-element column-element color-3">Nb</div>
            <div class="base-element column-element color-3">Ta</div>
            <div class="base-element column-element color-3">Db</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Cr</div>
            <div class="base-element column-element color-3">Mo</div>
            <div class="base-element column-element color-3">W</div>
            <div class="base-element column-element color-3">Sg</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Mn</div>
            <div class="base-element column-element color-3">Tc</div>
            <div class="base-element column-element color-3">Re</div>
            <div class="base-element column-element color-3">Bh</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Fe</div>
            <div class="base-element column-element color-3">Ru</div>
            <div class="base-element column-element color-3">Os</div>
            <div class="base-element column-element color-3">Hs</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Co</div>
            <div class="base-element column-element color-3">Rh</div>
            <div class="base-element column-element color-3">Ir</div>
            <div class="base-element column-element color-3">Mt</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Ni</div>
            <div class="base-element column-element color-3">Pd</div>
            <div class="base-element column-element color-3">Pt</div>
            <div class="base-element column-element color-3">Ds</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Cu</div>
            <div class="base-element column-element color-3">Ag</div>
            <div class="base-element column-element color-3">Au</div>
            <div class="base-element column-element color-3">Rg</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-3">Zn</div>
            <div class="base-element column-element color-3">Cd</div>
            <div class="base-element column-element color-3">Hg</div>
            <div class="base-element column-element color-3 font-sm">Unb</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-4">B</div>
            <div class="base-element column-element color-4">AI</div>
            <div class="base-element column-element color-4">Ga</div>
            <div class="base-element column-element color-4">In</div>
            <div class="base-element column-element color-4">TI</div>
            <div class="base-element column-element color-4 font-sm">Unt</div>
        </div>
        <div class="column">
            <div class="base-element column-element base-color">C</div>
            <div class="base-element column-element color-4">Si</div>
            <div class="base-element column-element color-4">Ge</div>
            <div class="base-element column-element color-4">Sn</div>
            <div class="base-element column-element color-4">Pb</div>
            <div class="base-element column-element color-4 font-sm">Unq</div>
        </div>
        <div class="column">
            <div class="base-element column-element base-color">N</div>
            <div class="base-element column-element base-color">P</div>
            <div class="base-element column-element color-4">As</div>
            <div class="base-element column-element color-4">Sb</div>
            <div class="base-element column-element color-4">Bi</div>
            <div class="base-element column-element color-4 font-sm">Unp</div>
        </div>
        <div class="column">
            <div class="base-element column-element base-color">O</div>
            <div class="base-element column-element base-color">S</div>
            <div class="base-element column-element base-color">Se</div>
            <div class="base-element column-element color-4">Te</div>
            <div class="base-element column-element color-4">Po</div>
            <div class="base-element column-element color-4 font-sm">Unh</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-5">F</div>
            <div class="base-element column-element color-5">CI</div>
            <div class="base-element column-element color-5">Br</div>
            <div class="base-element column-element color-5">I</div>
            <div class="base-element column-element color-5">At</div>
            <div class="base-element column-element color-7 font-sm">Uns</div>
        </div>
        <div class="column">
            <div class="base-element column-element color-6">He</div>
            <div class="base-element column-element color-6">Ne</div>
            <div class="base-element column-element color-6">Ar</div>
            <div class="base-element column-element color-6">Kr</div>
            <div class="base-element column-element color-6">Xe</div>
            <div class="base-element column-element color-6">Rn</div>
            <div class="base-element column-element color-6 font-sm">Uno</div>
        </div>
    </div>
    <div class="element-bottom">
        <div class="line">
            <div class="base-element line-element color-8">La</div>
            <div class="base-element line-element color-8">Ce</div>
            <div class="base-element line-element color-8">Pr</div>
            <div class="base-element line-element color-8">Nd</div>
            <div class="base-element line-element color-8">Pm</div>
            <div class="base-element line-element color-8">Sm</div>
            <div class="base-element line-element color-8">Eu</div>
            <div class="base-element line-element color-8">Gd</div>
            <div class="base-element line-element color-8">Tb</div>
            <div class="base-element line-element color-8">Dy</div>
            <div class="base-element line-element color-8">Ho</div>
            <div class="base-element line-element color-8">Tm</div>
            <div class="base-element line-element color-8">Yb</div>
            <div class="base-element line-element color-8">Lu</div>
        </div>
        <div class="line">
            <div class="base-element line-element color-9">Ac</div>
            <div class="base-element line-element color-9">Th</div>
            <div class="base-element line-element color-9">Pa</div>
            <div class="base-element line-element color-9">U</div>
            <div class="base-element line-element color-9">Np</div>
            <div class="base-element line-element color-9">Pu</div>
            <div class="base-element line-element color-9">Am</div>
            <div class="base-element line-element color-9">Cm</div>
            <div class="base-element line-element color-9">Bk</div>
            <div class="base-element line-element color-9">Cf</div>
            <div class="base-element line-element color-9">Es</div>
            <div class="base-element line-element color-9">Mc</div>
            <div class="base-element line-element color-9">No</div>
            <div class="base-element line-element color-9">Lr</div>
        </div>
    </div>
    <div class="bg"></div>
</body>
</html>